<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- <div id="flip-list-demo" class="demo">
        <button type="button" @click="shuffle">Shuffle</button>
        <transition-group name="flip-list" tag="ul">
          <li v-for="item in items" :key="item">{{item}}</li>
        </transition-group>
      </div> -->
      <!--   <div id="list-demo">
        <button type="button" @click="shuffle">Shuffle</button>
        <button @click="add">Add</button>
        <button @click="remove">Remove</button>
        <transition-group  name="list-complete" tag="p">
          <span v-for="item in items" v-bind:key="item" class="list-complete-item">{{item}}</span>
        </transition-group>
      </div> -->
      <!-- 多维网格 -->
   
        <button type="button" @click="matrix">Shuffle</button>

        <transition-group name="cell" tag="div" class="container">
          <div v-for="cell in cells" v-bind:key="cell.id" class="cell">{{cell.number}}</div>
        </transition-group>
  
    </div>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
          nextNum: 10,
          cells: Array.apply(null, { length: 81 }).map(function (_, index) {
            return {
              id: index,
              number: (index % 9) + 1,
            };
          }),
        },
        methods: {
          shuffle: function () {
            this.items = _.shuffle(this.items);
          },
          randomIndex: function () {
            return Math.floor(Math.random() * this.items.length);
          },
          add: function () {
            this.items.splice(this.randomIndex(), 0, this.nextNum++);
          },
          remove: function () {
            this.items.splice(this.randomIndex(), 1);
          },
          matrix:function(){
            this.cells = _.shuffle(this.cells);
          }
        },
      });
    </script>
    <style>
      /* .flip-list-move {
        transition: transform 1s;
      } */
      .list-complete-item {
        transition: all 1s;
        display: inline-block;
        margin-right: 10px;
      }
      .list-complete-enter,
      .list-complete-leave-to {
        opacity: 0;
        transform: translateY(30px);
      }
      .list-complete-leave-active {
        position: absolute;
      }

      .container{
        display: flex;
        flex-wrap: wrap;
        width: 238px;
        margin-top: 10px;
      }
      .cell{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 25px;
        height: 25px;
        border: 1px solid #aaa;
        margin-right: -1px;
        margin-bottom: -1px;
      }
      .cell:nth-child(3n){
        margin-right: 0;
      }
      .cell:nth-child(27n){
        margin-bottom: 0;
      }
      .cell-move{
        transition: transform 1s;
      }
    </style>
  </body>
</html>
